<template>
  <div>message1:{{ message1 }}</div>
  <div>message2:{{ message2 }}</div>
  <div>message3：{{ message3 }}</div>
  <div>message4：{{ message4 }}</div>
  <div>{{ a }}</div>
  <div>{{ b }}</div>
  <div>{{ c }}</div>
  <div v-for="item in list" :key="item.id">
    <div v-if="item.name == '王五'" style="color: red">{{ item.name }}</div>
    <div v-else style="color: green">{{ item.name }}</div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'
let message1 = ref(111)
const message2 = ref(222)
console.log(message2, 'message2')
console.log(message2.value, 'message2-value')
const message3 = ref({ name: '韩哈哈', age: 12 })
const message4 = reactive({ a: '111', b: '222', c: '333' })
const { a, b, c } = toRefs(message4)
const list = [
  { id: 1, name: '张三' },
  { id: 2, name: '李四' },
  { id: 3, name: '王五' },
]
</script>
